/*
  学习目标：使用useEffect触发卸载时的钩子函数
  需求1. 挂载时监听窗口的 改变事件
  需求2. 卸载时取消监听 窗口改变事件
*/

import React, { useEffect, useState } from 'react';


export default function App() {
    // 准备组件的显示与隐藏
    const [isShow, setIsShow] = useState(true);
    return (
        <div>
            {isShow && <Child></Child>}
            <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
        </div>
    );
}


function Child() {
    // 在子组件中挂载时监听窗口改变事件
    const resizeFn = () => {
        console.log('窗口改变了');
    }
    // *注意：逻辑过多的时候，分开来写、如果逻辑比较少，建议合起来写
    useEffect(() => {
        // 监听窗口
        window.addEventListener('resize', resizeFn)

        // 卸载事件
        // useEffect接受的回调函数中，返回一个 *同步函数，这个同步函数会在卸载时执行
        return () => {
            // 用途：卸载时，清除动作
            // console.log('被卸载了');
            window.removeEventListener('resize', resizeFn)
        }
    }, [])

    return <div>我是子组件</div>;
}
